<template>
  <div class="product"> 
    <div ref="product"> 
      <div class="back" @click="back"> 返回</div>
  <div class="product-name">{{ product.name }}</div>
  <div class="product-img"><img v-for="img in product.imgs" :key="img" :src="img"/></div>
  <div class="product-price"><span>${{ price }}</span></div>
  <div class="prdoucts-name"><span>{{ product.name }}</span></div>
  <div class="click-select">
    <span class="baozhang">保障</span><span class="huodaofukuan">货到付款</span>
    <span class="select">选择</span><span class="guige" @click="selectguige">请选择商品规格</span>
  </div>
</div>
    
  <div class="hidden-content" ref="hidden">
    <div class="hidden-img">
      <img v-for="img in product.imgs" :key="img" :src="img">
    </div>
    <div class="hidden-name">
      <span>{{ product.name }}</span>
    </div>
    <div class="salePrice"> 
    <sapn>${{ product.skus[skuIndex].salePrice }}</sapn> <span v-if="product.skus[skuIndex].originalPrice" class="originalPrice">{{ product.skus[skuIndex].originalPrice }}</span>
  </div>
  <div>
    <span class="guig">选择规格</span>
  </div>
  <div @click="changeSku(index)"  v-for="sku,index in product.skus" :key="sku.skuId" :class="{sku:true,active:index == skuIndex}"> 
   {{ sku.props }}
   </div>
  </div>
  
  <div class="xiangqing" ref="xiangqing"><span>详情</span></div>
  
  <div v-html="product.content" class="content">
  </div>
  
  
  </div>
</template>

<script>
import api from '../api'
export default {
data() {
  return{
    product:{

    },
    skuIndex:0,
    price:''
  }
},
mounted() {
  let query = this.$route.query
  let productId = query.productId
  this.$http({
    url:'/product?productId='+productId,
    
  }).then(product=>{
    product.imgs = product.imgs.split(',')
    for(let i=0;i<product.imgs.length;i++) {
      product.imgs[i] = api.baseURL + product.imgs[i]
    }
    for(let i =0;i<product.skus.length;i++) {
     this.price = product.skus[i].salePrice
    }
    this.product = product
  })
},
methods:{
  selectguige() {
   this.$refs.hidden.style.display = 'block'
   this.$refs.xiangqing.style.display = 'none'
   this.$refs.product.style.opacity='0.5'
   this.$refs.hidden.style.opacity = '1'
  },
  changeSku(index){
   this.skuIndex = index
  },
  back() {
    this.$router.back()
  }
}
}
</script>

<style>
.sku{
  position: absolute;
  top: 172px;
  left: 12px;
  width: 176px;
  height: 56px;
  font-size: 12px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
  color: #707070;
  background: #F5F5F5;
}
.sku.active{
  position: absolute;
  top: 138px;
  left: 12px;
  width: 176px;
  height: 26px;
  font-size: 12px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #FF7700;
  border: 1px solid #ff0000;
   background: #ffff;

}
.guig{
  position: absolute;
  font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
top: 112px;
left: 12px;
}
.hidden-name {
  position: absolute;
  top: 22px;
  left: 115px;
  font-size: 16px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
}
.hidden-img {
  width: 94px;
  height: 85px;
  padding-left: 12px;
  padding-top: 20px;
}
.hidden-img img {
  width: 94px;
  height: 85px;
}
.click-select {
  position: relative;
  width: 356px;
  height: 70px;
  background: #ffff;
  margin-top: 15px;
  margin-left: 10px;
  border-radius: 0px 0px 10px 10px;
}
.baozhang {
  position: absolute;
  top: 10px;
  left:11px ;
  font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #A1A1A1;
}
.huodaofukuan {
  font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
position: absolute;
top: 10px;
left: 63px;
}
.select {
  position: absolute;
  font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #A1A1A1;
top: 45px;
left: 11px;
}
.guige {
  font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
position: absolute;
top: 45px;
left: 63px;
}
.prdoucts-name {
  position: relative;
  width: 375px;
  height: 50px;
background: white;
}
.prdoucts-name span {
  position: absolute;
   font-size: 16px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #707070;
left: 8px;
top: 5px;
}
.product-price {
  width: 375px;
  height: 25px;
  font-size: 20px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #F86D1C;
background: white;
}
.product-price span{
  margin-left: 8px;
  margin-top: 8px;
}
.hidden-content {
  position: absolute;
  display: none;
  width: 375px;
  height: 370px;
  background: #ffffff;
  top: 298px;

}
.salePrice {
  position: absolute;
  font-size: 20px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #F86D1C;
top: 64px;
left: 112px;
}
.originalPrice{
  font-size: 13px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
  text-decoration: line-through;
  color:white;
}
.xiangqing {
  position: relative;
  font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #2A4458;
width: 375px;
height: 40px;
background-color: white;
text-align: center;
margin-top: 10px;
}
.xiangqing span {
  position: absolute;
  top: 10px;
  left: 174px;
}
.content {
  width: 375px;
  font-size: 14px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #2A4458;
margin-top: 10px;
text-align: center;

}
.product-img{
  width: 375px;
  height: 272px;
  background-color: white;
  margin-top: 10px;
}
.product-img img {
  width: 375px;
  height: 272px;
}
.product {
  width: 375px;
  height: 2783px;
  position: relative;
  background-color: #F5F5F5;
}
.product-name {
  font-size: 18px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #000000;
text-align: center;
margin-top: 55px;
}
.back{
font-size: 18px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #000000;
/* top: 0px; */
}
</style>